<template>
  <view class="content">
    <view class="input-group">
      <view class="input-row border">
        <text class="title">账号：</text>
        <m-input class="m-input" type="text" clearable v-model="username" placeholder="请输入账号"></m-input>
      </view>
      <view class="input-row">
        <text class="title">密码：</text>
        <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
      </view>
    </view>
    <view class="btn-row">
      <button type="primary" class="primary btn-login" @tap="bindLogin">登录</button>
      <button v-if="storeId" type="primary" class="primary btn-login btn-gohome" @tap="gotoHomePage">返回首页</button>
    </view>
  </view>
</template>

<script>
import mInput from "@/components/m-input.vue";
import { STORE_LOGIN } from "@/api";
export default {
  components: {
    mInput
  },
  data() {
    return {
      username: "",
      password: "",
      positionTop: 0,
			storeId: this.$store.state.storeConf.store_id,
    };
  },
  onReady() {
    this.initPosition();
  },
  methods: {
    initPosition() {
      /**
       * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
       * 反向使用 top 进行定位，可以避免此问题。
       */
      this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
    },
    // 登录
    bindLogin() {
      let that = this;
      // #ifdef APP-PLUS
        plus.key.hideSoftKeybord()
      // #endif
      if (!that.username) {
        that.$common.msgToShow("请输入账号");
        return;
      } else if (!that.password) {
        that.$common.msgToShow("请输入密码");
        return;
      }
      const qsData = {
        username: that.username,
        password: that.password
      };
      that.$_post(STORE_LOGIN, qsData).then(res => {
        if (res.code === 1) {
					that.$store.commit('setadminId', res.data.id)
          that.$common.navigateTo("/pages/store/index");
        } else {
          that.$common.msgToShow(res.msg);
        }
      });
    },
    // 返回首页
    gotoHomePage() {
      this.$common.navigateBack("/pages/index/index");
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 54vw;
  margin: 20vw auto 0;
  display: flex;
  flex-direction: column;
}
m-input {
  width: 100%;
  min-height: 100%;
  display: flex;
}
.input-row {
  font-size: 16px;
  border-radius: 5px;
  background-color: #f2f2f2;
  margin-bottom: 2vw;
}
.action-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.action-row navigator {
  color: #007aff;
  padding: 0 20px;
  box-sizing: border-box;
}

.input-group {
  margin-top: 40px;
  position: relative;
}

.input-row {
  display: flex;
  flex-direction: row;
  position: relative;
}

.input-row .title {
  width: 10vw;
  height: 50px;
  min-height: 50px;
  padding: 10px 0;
  padding-left: 30px;
  line-height: 30px;
  box-sizing: border-box;
}

.btn-row {
  padding: 20px 0;
  box-sizing: border-box;
  .btn-login{
    background-color: #c9ab6f;
  }
  .btn-gohome {
    margin-top: 2vw;
    background-color: transparent;
    color: #c9ab6f;
    border: 1px solid #c9ab6f;
  }
}
</style>
